<template>
<div class="sroll" ref="srolls">
  <div class="result" ref="result"  >
    <div class="result-size" v-if="searchSelect=='localsearch'">嗖搜为你找到相关结果为<b style="color:#e85a47;font-weight: normal;">{{totals}}</b>个</div>
      <div class="result-size" v-else>嗖搜为你找到相关结果</div>
    <div class="chose" v-show="searchSelect=='localsearch'">
      <div class="left">
        <div class="title">时间排序</div>
        <div class="body">
          <span :class="{active:sortindex == 1}" @click="timeDesc()">时间降序</span>
          <span :class="{active:sortindex == 0}" @click="timeAsc()">时间升序</span>
          <span :class="{active:sortindex == 2}" @click="timeralated()">相关性排序</span>
        </div>
      </div>
      <div class="right">
        <div class="title">监测范围</div>
        <div class="body">
          <span  :class="{active:searchindex == 0}" @click = "all()">全国</span>
          <span  :class="{active:searchindex == 1}" @click="local()">本地</span>
        </div>
      </div>
    </div>
    <div class="items">
      <div class="item" v-for="(item,index) in resultList" :key="index">
        <!--{{item.potime}}-->
        <div class="checkbox">
          <span>{{index+1}}</span>
        </div>
        <div class="content">
          <div class="main">
            <div class="pic">
              <div class="img" v-bind:style="{backgroundImage:item.urlimg}" ></div>
              <div class="label" >{{item.webSite}}</div>
            </div>
            <div class="text">
              <div class="head">
                <div class="left">
                  <div class="title" @click="link(item.url)" v-html="lineheight(item.title)"></div>
                </div>
              </div>
              <div class="body" v-html="lineheight(item.content)">
                
              </div>
            </div>
          </div>
        </div>
        <div class="time" v-if="searchSelect=='localsearch'">
          <div class="date">{{item.poTime | filterDate}}</div>
          <div class="sec">{{item.poTime | filterSec}}</div>
        </div>
        <div class="time" v-else>
          <div class="date">{{item.potime | filterDate}}</div>
          <div class="sec">{{item.potime | filterSec}}</div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
  import {bus} from 'src/bus.js'
  import TendLabel from 'components/common/TendLabel'
  import moment from 'moment'
  export default {
    name:"sroll",
    components:{TendLabel},
    data(){
      return{
        sortindex:1,
        searchindex:0,
        currentPage:1,
        size:30,
        sortField:'desc',
        resultList:[],
        totals:0,
        scope:-1,
        flag:false,
        score:'poTime',
        flag1:false,
      }
    },
    computed:{
      searchSelect:function(){
        return  this.$store.state.Result.searchSelect
      },
      searchText:function(){
        return  this.$store.state.Result.searchText
      },
      domain:function(){
        return  this.$store.state.Result.domain
      },
      count:function(){
        return  this.$store.state.Result.count
      }
    },
    filters:{
      filterDate(value){
        if ((value+'').indexOf('-')==0){
          value = Math.abs(value)
        }
        return  moment(value).format('YYYY-MM-DD')
      },
      filterSec(value){
        if ((value+'').indexOf('-')==0){
          value = Math.abs(value)
        }
        return moment(value).format('HH:mm:ss')
      },
    },
    mounted(){
      let s = this.$refs.srolls
      this.currentPage = 1
      if(this.searchText!=''){
        this.getResult()
      }
      bus.$on('searchTop', function () {
        s.scrollTop = 0;
      })
      let srolls = this.$refs.srolls
      srolls.addEventListener('scroll', () => {
        let n = this.$refs.srolls.scrollTop
        bus.$emit('result', Number(n))
        let m = this.$refs.result.clientHeight-this.$refs.srolls.scrollTop-this.$refs.srolls.clientHeight+30
        if(m<10){
          if(!this.flag1){
            this.queryMore()
          }
          
        }
      }, false)
    },
    watch:{
      count(){
        this.currentPage = 1
        this.resultList=[]
        this.getResult()
      },
    },
    methods:{
      async getResult(){
        this.flag1 = true
        this.$store.commit('LoadingTrue');
        let doname = ''
        if(this.searchSelect == 'localsearch'){
          doname = this.domain
        }
        let res = await this.$http.post('vrv-monitor-platform-web/data/homeSearch',{
          currentPage:this.currentPage,
          size:this.size,
          sortField:this.score,
          sortType:this.sortField, //desc _score
          searchType:this.searchSelect,
          query:this.searchText,
          scope:this.scope,
          domain:doname
        }).catch(err=>{
          this.$store.commit('Loadingfalse');
        })
        if(res.body.success==true){
          if(!this.flag){
            let arr = res.body.data
            this.resultList = this.resultList.concat(arr)
          }else{
            this.resultList = res.body.data
          }
          this.totals = res.body.totals||res.body.total
          this.$store.commit('Loadingfalse');
          (this.resultList.filter(d => d!='').length>0)&&this.resultList.filter(d => d!='').forEach((value,index)=>{
            console.log()
            if(typeof(value.domain!='undefined')){
              let imgurl = value.domain
              this.$http.get(`static/${imgurl}.png`).then(res=>{
                  this.$set(value,'urlimg', `url(static/${imgurl}.png)` )
              }).catch(err=>{
                  this.$set(value,'urlimg',"url('static/defult.png')")
              })
            }else{
              this.$set(value,'urlimg',"url('static/defult.png')")
            }
          })
          this.flag1 = false
        }
      },
      link(url){
        window.open(url)
      },
      timeAsc(){
        this.sortField = 'asc'
        this.sortindex = 0
        this.score = 'poTime'
        this.flag = true
        this.getResult()
        
      },
      timeDesc(){
        this.sortField = 'desc'
        this.sortindex = 1
        this.score = 'poTime'
        this.flag = true
        this.getResult()
        
      },
      timeralated(){
        this.sortindex = 2
        this.sortField = 'desc'
        this.score = '_score'
        this.flag = true
        this.getResult()
      },
      all(){
        this.scope = -1
        this.searchindex = 0
        this.flag = true
        this.getResult()
      },
      local(){
        this.scope = 1
        this.searchindex = 1
        this.flag = true
        this.getResult()
      },
      queryMore(){
        this.currentPage++
        this.flag = false
        this.getResult()
      },
      handleSizeChange(val) {
        this.size = val
        this.getResult()
        },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getResult()
      },
      filterHtml(value){
        return value.replace(/{{{(.+)}}}/g, `<span class="light" style="color:red">$1</span>`)
      },
      lineheight(value){
        let newhtml =''
        var input=value;
        var keys=this.searchText;

        var prepareKeys=function(){
        if(!prepareKeys.$map){
          var map={};
          var maxLength=0;
          for(var i=0;i<keys.length;i++){
            map[keys[i]]=1;
            maxLength=Math.max(keys[i].length,maxLength);
          }
          prepareKeys.$map={
            map:map,
            length:maxLength
          }
        }
          return prepareKeys.$map;
        }
        var colorKeyword=function(str){
          var info=prepareKeys();
          var output=[];
          while(str){
            var sub=str.substring(0,info.length);
            str=str.substring(info.length);
            while(!info.map[sub]&&sub){
              str=sub.charAt(sub.length-1)+str;
              sub=sub.slice(0,-1);
            }
            if(sub){
              output.push('<b style="color:#e85a47;font-weight:normal">',sub,'</b>');
            }else{
              output.push(str.charAt(0));
              str=str.substring(1);
            }
          }
          newhtml = output.join('')
        }
        colorKeyword(input);
        newhtml = newhtml.replace(/{{{/g,'').replace(/}}}/g,'')
        return newhtml
      },
    }
  }
</script>
<style scoped>
  .sroll{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 0.94rem 1.4rem 0.94rem 1.25rem;
    overflow: auto;
  }
  .result{
    background: #fff;
    min-height: 100%;
    overflow: hidden;
    margin-right: 1.8rem;
  }
  .result-size{
    height: 2.5rem;
    line-height: 2.5rem;
    padding: 0 1.25rem;
    font-size: 0.75rem;
    color: #666;
    border-bottom: 1px solid #dcdcdc;
  }
  .result-size b{
    padding: 0 0.2rem;
  }
  .chose{

    height: 3.1rem;
    border-bottom: 1px solid #dcdcdc;
    line-height: 3.1rem;
   
  }
   .chose>div{
    float: left;
    width: 50%;
    display: flex;
   }
  .chose>div .title{
    width: 9.3rem;
    background: #ebebeb;
    text-align: center;
    font-size: 0.88rem;
    color: #333;
    cursor: pointer;
  }
 .chose>div .body span{
    display:inline-block; 
    width:5rem ;
    height: 2.1rem;
    border-radius: 4px;
    line-height: 2.1rem;
     font-size: 0.88rem;
    margin: 0 2.2rem;
    color: #000;
    text-align: center;
    cursor: pointer;
 }
 .chose>div .body span.active{
    background: #e85a47;
    color: #fff;
    text-align: center;
 }
 .result >.head{
    height: 3.1rem;
    line-height: 3.1rem;
    padding: 0 0.6rem;
    border-bottom: 1px solid #dcdcdc;
 }
 .head input{
    height: 2.1rem;
    border: 1px solid #dcdcdc;
    padding: 0 1.5rem;
    border-radius: 4px;
    background: #fff;
    margin-right: 1.5rem;
    cursor: pointer;
 }
.head .first{
  margin-left: 2rem;
}
.head >.right{
  float: right;
  margin-right: 2rem;
}
.head select{
  width: 6.25rem;
  height: 2.1rem;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  padding-left: 1.5rem;
  margin-right: 1rem;
}
.items .item{
  display: flex;

}
.items .item{
  height: 8.75rem;
  border-bottom: 1px solid #dcdcdc;
}
.items .item .checkbox{
  padding: 0 0.6rem;
  flex:0 0 4.5rem;
  width: 4.5rem;
  line-height: 8.75rem;
  border-right:1px solid #dcdcdc;
      text-align: center;
}
.items .item .time{
  flex:0 0 13.25rem;
  width: 13.25rem;
  text-align: center;
  line-height: 1.3rem;
  padding-top: 3.5rem;
  border-left: 1px solid #dcdcdc;
}
.items .item .content{
  flex:1;
 
}
.items .item .content .main{
   height: 8.75rem;
  display: flex;
}
.items  .main .pic{
  flex:0 0 9.1rem;
  text-align: center;
  font-size: 14px;
  color: #333;
  border-right: 1px solid #dcdcdc;

}
.items .main .pic .img{
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  border: 1px solid #dcdcdc;
  margin: 0 auto;
  margin-top: 1.3rem;
  margin-bottom: 0.4rem;
  background-size:cover;
  background-position:center;
}
.items .main .text{
  padding: 1.2rem 4.8rem 2.1rem 1.7rem;
  width: 100%;
}
.items .main .text .head{
  overflow: hidden;
  height: 2.2rem;

}
.items .main .text .head .left{
  display: flex;
  float: left;
   line-height: 2.2rem;
}
.items .main .text .head .left .title{
  font-size: 1rem;
  color: #333;
  padding-right:3rem; 
  cursor: pointer;
}
.similar{
  color: #ff3b3b;
}
.items .main .text .head .right{
  line-height: 2.2rem;
  float: right;
  text-align: right;
  margin-right: 0;
}
.items .main .body{
  height: 3.2rem;
  line-height: 1.6rem;
  overflow: hidden;
  font-size: 14px;
  color: #666;
}
.imgbtns{
  float: right;
  display: flex;
  height: 3.25rem;
  cursor: pointer;
}
.imgbtns .imgbtn,.imgbtns .keyword{
  font-size: 14px;
  color: #666;
  margin-top: 0.5rem;
  height: 2.25rem;
  line-height: 2.25rem;
  border-left: 1px solid #dcdcdc;
  padding: 0 2rem;
}
.imgbtns .imgbtn i{
  margin-right: .5rem;
}
.block{
  margin: 1rem;
  text-align: right;
}
.m-top{
  margin-top: 2.3rem !important;
}

@media screen and (max-width: 1500px) {
  .chose>div .body span{
    width: 5rem;
    margin: 0 1rem

  }

}

</style>